<script setup>
import { ref, createVNode, nextTick,onMounted } from "vue"
import defaultSetting from "@/common/utils/defaultSetting"
import { Modal } from 'ant-design-vue';
import { NotificationOutlined } from '@ant-design/icons-vue';
import store from "@/store/index";

const isUpdate = ref(false)
const autoUpdater = window.autoUpdater
const percent = ref(0)
const appName = ref('');
const version = ref('')


onMounted(()=>{
  store.dispatch("getAiConfig").then((aiConfig) => {
    appName.value = aiConfig.site_name
  })
})

autoUpdater.on('update-available', res => {
  console.log('found new version', res)
  version.value = res.version

  console.log(defaultSetting.updater.autoUpdate)
  const next = () => {

    isUpdate.value = true

    nextTick(() => {
      autoUpdater.downloadUpdate()
    })
  }

  if (! defaultSetting.updater.autoUpdate){
    Modal.confirm({
      title: '软件更新提示',
      icon: createVNode(NotificationOutlined),
      content: `发现新版本(v${res.version}), 确定更新?`,
      okText: '确定',
      cancelText: '取消',
      onOk() {
        next()
      }
    });
  } else {
    next()
  }
})

autoUpdater.on('download-progress', res => {
  percent.value = parseFloat(res.percent.toFixed(2))
})

autoUpdater.on('update-downloaded', (info) => {
  percent.value = 100
  console.log('Update downloaded...', info);
  nextTick(() => {
    console.log(autoUpdater)
    autoUpdater.quitAndInstall()
  })
})

autoUpdater.on('error', (error) => {
  console.error('Error in auto-updater:', error);
});

function initData() {
  autoUpdater.checkForUpdates()
}

initData()
</script>

<template>
  <a-modal
    v-model:visible="isUpdate"
    :footer="null"
    :closable="false"
    :maskClosable="false"
    centered
    :width="800"
    wrapClassName="update-modal"
    title="正在下载更新文件"
  >
    <div class="update-box">
      <div class="container">
        <div class="title">{{ appName }} AI短视频创作与分发平台</div>
        <div class="text">
          <div>服务于企业视频内容生产营销全链路!</div>
          <div>提供批量视频混剪、脚本剪辑等多款AI创作工具,</div>
          <div>多平台内容营销工具，视频一键分发，提高运营效率,</div>
          <div>海量爆款模板，助力企业创作更多高品质视频，驱动业务增长!</div>
        </div>
      </div>

      <div class="update-speed">
        <div class="update-text">
          发现新版本 v{{ version}}，更新进度：{{ percent }}%...
        </div>
        <a-progress :percent="percent" status="active" :showInfo="false" style="position: absolute;bottom: -8px;" :strokeWidth="6"/>
      </div>
    </div>
  </a-modal>
</template>

<style lang="less">
.update-modal {
  .ant-modal-content {
    border-radius: 8px;
    overflow: hidden;
  }

  .ant-modal-body {
    padding: 0px;
  }
}
</style>
<style lang="less" scoped>
.update-box {
  height: 450px;
  position: relative;
  background: url(../../common/image/shotstack/updater_bg.png) no-repeat center center;
  background-size: cover;

  .container {
    width: 100%;
    position: absolute;
    right: 0;
    top: 100px;
    text-align: center;
    padding-left: 60px;

    .title {
      font-size: 28px;
      font-weight: 500;
    }

    .text {
      margin-top: 30px;
      font-size: 18px;

      & > div {
        margin-bottom: 10px;
      }
    }
  }

  .update-text {
    position: absolute;
    bottom: 12px;
    text-align: center;
    width: 100%;
    color: #909090;
    font-size: 14px;
  }
}
</style>
